<template>
  <!-- 消息通知页面 -->
  <div class="main">
    <!-- 消息页面路由 -->
    <el-row :gutter="20">
      <el-col :xs="12" :sm="11" :md="9" :lg="6">
        <div class="left_">
          <div
            :class="[type == 1 ? 'item_ activeClass' : 'item_']"
            @click="handleActive(1)"
          >
            <div class="left">
              <div class="num">{{ unRead }}件</div>
              <div class="name">未阅通知</div>
            </div>
            <div class="right">
              <img src="../assets/images/message1.png" alt="" />
            </div>
            <div class="bottom bottom1">
              <div
                class="shan"
                style="color: #fff; font-size: 14px"
                v-show="getTotal != 0"
              >
                阅读占比 {{ (100 - (unRead / getTotal) * 100).toFixed(2) }}%
              </div>
              <img src="../assets/images/message2.png" alt="" />
            </div>
          </div>

          <div
            :class="[type == 2 ? 'item_ activeClass1 item_1' : 'item_ item_1']"
            @click="handleActive(2)"
            v-if="isShow"
          >
            <div class="left">
              <div class="num">{{ notDone }}件</div>
              <div class="name">待办事宜</div>
            </div>
            <div class="right right1">
              <img src="../assets/images/message3.png" alt="" />
            </div>
            <div class="bottom">
              <div class="shan" style="color: #fff; font-size: 14px">
                完成占比 {{ (100 - (notDone / getTotal) * 100).toFixed(2) }}%
              </div>
              <img src="../assets/images/message4.png" alt="" />
            </div>
          </div>
          <div class="box_b">
            <div
              :class="[finisActive == 0 ? 'finish active' : 'finish']"
              @click="handleFinishTab(0)"
            >
              已读通知
            </div>
            <div
              :class="[finisActive == 1 ? 'finish active' : 'finish']"
              @click="handleFinishTab(1)"
              v-if="isShow"
            >
              已办事宜
            </div>
          </div>
        </div></el-col
      >
      <el-col :xs="12" :sm="13" :md="15" :lg="18">
        <div class="right_">
          <div class="top_">
            <div class="left">
              <span v-if="type == 1">未阅通知</span>
              <span v-if="type == 2">待办事项</span>
              <span v-if="finisActive == 0">已读通知</span>
              <span v-if="finisActive == 1">已办事项</span>
              <span
                v-if="
                  isInput &&
                  type != 1 &&
                  type != 2 &&
                  finisActive !== 0 &&
                  finisActive !== 1
                "
                >{{ title_ }}</span
              >
            </div>
            <div class="right">
              <div class="input">
                <span class="el-icon-search"> </span>
                <input
                  placeholder="请输入内容"
                  class="input_content"
                  v-model="queryParams.agencyReason"
                />
              </div>
              <el-select
                class="input"
                v-model="isInput"
                placeholder="请选择消息状态"
                size="small"
                style="
                  width: 180px;
                  margin-left: 20px;
                  outline: none;
                  border: none;
                "
              >
                <el-option key="2" label="未办事宜" value="1" />
                <el-option key="1" label="已办事宜" value="2" />
                <el-option key="4" label="未读通知" value="3" />
                <el-option key="3" label="已读通知" value="4" />
              </el-select>
              <el-button
                class="close seach"
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button
                icon="el-icon-refresh"
                size="mini"
                @click="resetQuery"
                class="close"
                >重置</el-button
              >
              <el-button
                class="close"
                type="danger"
                plain
                icon="el-icon-refresh"
                size="mini"
                style="background: #fff"
                @click="handleClearCache"
                >刷新</el-button
              >
              <div class="close" @click="handleClose">
                <span class="el-icon-close"></span> 关闭
              </div>
            </div>
          </div>
          <div class="bottom_">
            <el-table v-loading="loading" :data="messageList">
              <el-table-column
                label="序号"
                align="center"
                type="index"
                width="60"
              />
              <el-table-column
                label="申请人"
                align="center"
                prop="agencyApplicant"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="原因"
                align="center"
                prop="agencyReason"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="开始时间"
                align="center"
                prop="btnBeginTime"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="结束时间"
                align="center"
                prop="btnEndTime"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="经办人"
                align="center"
                prop="agencyAgent"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="经办时间"
                align="center"
                prop="handlingTime"
                :show-overflow-tooltip="true"
              />
              <el-table-column label="经办状态" align="center">
                <template slot-scope="scope">
                  <span>{{
                    scope.row.agencyState == "1" ? "已办" : "未办"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="160"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleDetail(scope.row)"
                    >详情</el-button
                  >

                  <el-button
                    v-if="type == 2"
                    size="mini"
                    type="text"
                    @click="handleUpdate(scope.row)"
                    >审批</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </div>
          </div></div
      ></el-col>
    </el-row>
    <!-- 审批消息对话框 -->
    <div class="dialog">
      <el-dialog
        :title="messageTitle"
        :visible.sync="open"
        width="600px"
        custom-class="dialog"
        @closed="cancel"
      >
        <div class="xian_"></div>
        <!-- 审批 -->
        <div class="content" v-if="messageType == 2">
          <div class="one_">
            <span class="left_">申请人: </span> {{ rowData.agencyApplicant }}
          </div>
          <div class="one_">
            <span style="font-size: 16px; color: #999999">有效期天数：</span
            ><input type="text" v-model="effectiveTime" class="input_day" />天
          </div>
          <div class="one_" v-if="rowData.btnEndTime">
            <span class="left_"> 消息内容: </span>
            <!-- <span
              class="time"
              style="margin-left: -2px"
              v-if="rowData.createTime || rowData.btnEndTime"
              ><span v-if="rowData.createTime"
                >下单时间 {{ rowData.createTime }}</span
              > -->
            <span v-if="rowData.btnEndTime"
              >发货按钮失效时间 {{ rowData.btnEndTime }}</span
            >
          </div>
          <div class="one_">
            <span class="left_">创建时间: </span> {{ rowData.createTime }}
          </div>
          <div class="one_">
            <span class="left_">备注: </span>
            <el-input
              resize="none"
              type="textarea"
              placeholder="请输入内容"
              v-model="rowData.remarks"
              class="textInput"
            >
            </el-input>
          </div>
        </div>
        <!-- 详情 -->
        <div class="content" v-if="messageType == 1">
          <div class="one_">
            <span class="left_">申请人: </span> {{ rowData.agencyApplicant }}
          </div>
          <div class="one_" v-if="rowData.btnEndTime">
            <span class="left_">消息内容: </span>
            <!-- <span
                class="time"
                style="margin-left: -2px"
                v-if="rowData.createTime || rowData.btnEndTime"
                ><span v-if="rowData.createTime"
                  >下单时间 {{ rowData.createTime }}</span
                ></span> -->
            <span>发货按钮失效时间 {{ rowData.btnEndTime }}</span>
          </div>
          <div class="one_">
            <span class="left_">创建时间: </span> {{ rowData.createTime }}
          </div>
          <div class="one_">
            <span class="left_"> 申请原因: </span> {{ rowData.agencyReason }}
          </div>
          <div class="one_">
            <span class="left_">备注: </span>
            <div class="textInput textTnput1">{{ rowData.remarks }}</div>
          </div>
        </div>

        <div class="dialog-footer" v-if="messageType == 2">
          <el-button @click="cancel">取 消</el-button>
          <el-button @click="handleRatify" type="primary">同意</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  listMessage,
  totalMessage,
  indexMessage,
  editMessage,
} from "@/api/message";
export default {
  data() {
    return {
      messageTitle: "",
      messageType: 3,
      effectiveTime: "", //下单时间
      title_: "",
      isInput: "",
      finisActive: 3,
      // 遮罩层
      loading: true,
      total: 0,
      messageList: [],
      queryParams: {
        //查询参数
        pageNum: 1,
        pageSize: 10,
        agencyReason: "", //信息内容
        agencyState: "0", //是否已办
        agencyType: "0", //是否已读
      },
      open: false,
      rowData: {}, //行数据
      type: 1,
      unRead: "", //未读
      notDone: "", //未办
      getTotal: 0,
      isShow: false,
    };
  },
  watch: {
    $route(to, from) {
      //监听路由是否变化
      if (to.query.type == this.type) {
        return false;
      } else {
        this.type = to.query.type;
        if (this.type == 1) {
          this.queryParams.agencyType = "0";
          this.queryParams.agencyState = "";
        } else if (this.type == 2) {
          this.queryParams.agencyType = "";
          this.queryParams.agencyState = "0";
        }
        this.getList();
      }
    },
  },
  mounted() {
    this.indexMessage();
    this.getListTotal();
    this.type = this.$route.query.type;
    if (this.type == 1) {
      this.queryParams.agencyType = "0";
      this.queryParams.agencyState = "";
    } else if (this.type == 2) {
      this.queryParams.agencyType = "";
      this.queryParams.agencyState = "0";
    }
    this.getList();
  },
  methods: {
    handleClearCache() {
      window.location.reload();
    },
    resetQuery() {
      //重置
      this.queryParams.agencyReason = "";
      this.isInput = "";
      this.finisActive = "";
      this.type = this.$route.query.type;
      if (this.type == 1) {
        this.queryParams.agencyType = "0";
        this.queryParams.agencyState = "";
      } else if (this.type == 2) {
        this.queryParams.agencyType = "";
        this.queryParams.agencyState = "0";
      }
      this.getList();
    },
    indexMessage() {
      indexMessage().then((res) => {
        this.unRead = res.rows[0].unRead;
        this.notDone = res.rows[0].notDone;
        if (res.rows[0].show) {
          this.isShow = res.rows[0].show;
        }
      });
    },
    handleFinishTab(index) {
      this.type = 3;
      this.finisActive = index;
      this.queryParams.pageNum = 1;
      this.queryParams.agencyReason = "";
      if (index == 0) {
        this.queryParams.agencyType = "1";
        this.queryParams.agencyState = "";
      } else if (index == 1) {
        this.queryParams.agencyType = "";
        this.queryParams.agencyState = "1";
      }
      this.getList();
    },
    handleQuery() {
      if (this.isInput) {
        this.type = 66;
        this.finisActive = 88;
      }
      if (this.isInput == 1) {
        this.title_ = "未办事项";
        this.queryParams.agencyType = "";
        this.queryParams.agencyState = "0";
      } else if (this.isInput == 2) {
        this.title_ = "已办事项";
        this.queryParams.agencyType = "";
        this.queryParams.agencyState = "1";
      } else if (this.isInput == 3) {
        this.title_ = "未读通知";
        this.queryParams.agencyType = "0";
        this.queryParams.agencyState = "";
      } else if (this.isInput == 4) {
        this.title_ = "已读通知";
        this.queryParams.agencyType = "1";
        this.queryParams.agencyState = "";
      }
      //搜索
      this.getList();
    },
    // handleInput(e) {
    //   //搜索
    //   this.queryParams.pageNum = 1;
    //   this.queryParams.pageSize = 10;
    //   this.queryParams.agencyType = "";
    //   this.queryParams.agencyState = "";
    //   this.type = "";
    //   this.queryParams.agencyReason = e.target.value;
    //   this.getList();
    // },
    /** 查询消息列表 */
    getList() {
      this.loading = true;
      listMessage(this.queryParams).then((response) => {
        this.messageList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getListTotal() {
      totalMessage().then((response) => {
        this.getTotal = response.total;
        console.log(this.getTotal);
      });
    },
    handleDetail(data) {
      //详情弹框
      this.messageType = 1;
      this.messageTitle = "消息详情";
      this.rowData = data;
      this.open = true;
      editMessage({
        agencyId: data.agencyId,
        agencyType: "1",
        agencyState: "0",
      }).then((res) => {});
    },
    handleUpdate(data) {
      //审批弹框
      this.messageType = 2;
      this.messageTitle = "消息审批";
      this.rowData = data;
      this.open = true;
      editMessage({
        agencyId: data.agencyId,
        agencyType: "1",
        agencyState: "0",
      }).then((res) => {});
    },
    handleRatify() {
      if (this.effectiveTime == "") {
        this.$message({
          message: "请输入有效期天数",
          type: "warning",
        });
        return false;
      }
      //批准
      editMessage({
        agencyId: this.rowData.agencyId,
        agencyState: "1",
        agencyType: "1",
        remarks: this.rowData.remarks,
        effectiveTime: Number(this.effectiveTime),
        orderNumber: this.rowData.orderNumber,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.open = false;
          this.effectiveTime = "";
          this.indexMessage();
          this.getList();
        }
      });
    },
    // 关闭详情按钮
    cancel() {
      this.open = false;
      this.indexMessage();
      this.getList();
    },
    handleActive(index) {
      if (this.type == index) {
        return false;
      }
      this.finisActive = 5;
      this.queryParams.agencyReason = "";
      this.queryParams.pageNum = 1;
      this.type = index;
      if (index == 1) {
        this.queryParams.agencyType = "0";
        this.queryParams.agencyState = "";
      } else {
        this.queryParams.agencyState = "0";
        this.queryParams.agencyType = "";
      }
      this.getList();
    },
    handleClose() {
      this.$router.go(-1);
    },
  },
};
</script> 

<style lang="scss" scoped>
.input_day {
  outline: none !important;
  width: 48px;
  height: 32px;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  margin-right: 10px;
  padding-left: 3px;
  text-align: center;
  box-sizing: border-box;
  margin-left: 3px;
}
::v-deep .el-textarea__inner {
  width: 100%;
  height: 100% !important;
  outline: none;
  border: none;
}
.xian_ {
  height: 1px;
  width: 600px;
  background-color: #eee;
  margin-left: -20px;
  margin-top: -25px;
  margin-bottom: 30px;
}
::v-deep .el-input__inner {
  outline: none !important;
  border: none !important;
  background-color: #f8f8f8 !important;
}
.main {
  .dialog {
    .dialog-footer {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
    .content {
      margin-top: -10px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      line-height: 24px;
      .one_ {
        display: flex;
        align-items: center;
        margin-top: 20px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        .left_ {
          width: 89px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          text-align: justify !important;
          text-align-last: justify !important;
          margin-right: 10px;
        }
        .textInput {
          overflow: hidden;
          width: 100%;
          height: 100px;
          border: 1px solid #e3e3e3;
          border-radius: 10px;
          padding: 5px 0;
          box-sizing: border-box;
        }
        .textTnput1 {
          padding: 10px 10px;
          box-sizing: border-box;
        }
      }
    }
  }
  .el-dialog__wrapper {
    // padding-top: 180px !important;
    box-sizing: border-box;
    .el-dialog {
      border-radius: 24px !important;
    }
    .el-dialog__header {
      border-radius: 24px 24px 0 0 !important;
    }
    .el-dialog__footer {
      border-radius: 0 0 24px 24px !important;
    }
  }

  .pagination {
    margin-top: 20px;
  }
  padding: 46px 43px;
  .right_ {
    .top_ {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      .left {
        font-size: 22px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }
      .right {
        display: flex;
        align-items: center;
        .input {
          width: 200px;
          height: 46px;
          background: #f8f8f8;
          border-radius: 10px;
          display: flex;
          align-items: center;
          padding: 0 14px;
          box-sizing: border-box;
          outline: none;
          border: none;
          .input_content {
            height: 100%;
            margin-left: 10px;
            border: none;
            outline: none;
            background-color: #f8f8f8;
          }
        }
        .close {
          cursor: pointer;
          margin-left: 20px;
          height: 40px;
          width: 80px;
          border: 1px solid #f3f3f3;
          border-radius: 10px;
          display: flex;
          justify-content: space-between;
          padding: 0 15px;
          box-sizing: border-box;
          align-items: center;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
        }
        .seach {
          color: #fff;
          height: 40px;
          width: 80px;
        }
      }
    }
  }
  .left_ {
    width: 100%;
    .box_b {
      //    padding-top: 24px;
      .finish {
        width: 100%;
        padding: 24px 0;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        border-bottom: 1px solid #e3e3e3;
        cursor: pointer;
      }
      .active {
        color: red;
      }
    }
    .activeClass {
      box-shadow: 3px 4px 30px 0px rgba(232, 106, 66, 0.4);
    }
    .activeClass1 {
      box-shadow: 0px 5px 30px 0px rgba(64, 121, 255, 0.4);
    }
    .item_ {
      cursor: pointer;
      position: relative;
      z-index: 66;
      width: 100%;
      height: 188px;
      background: #ffffff;
      border: 2px solid #e86a42;
      border-radius: 24px;
      overflow: hidden;
      margin-bottom: 50px;
      box-sizing: border-box;
      padding: 44px 37px;
      position: relative;
      display: flex;
      justify-content: space-between;
      .bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 47px;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 37px;
        align-items: center;
        background: #4079ff;
        img {
          height: 17px;
          width: 45px;
        }
      }
      .bottom1 {
        background-color: #e86a42;
      }
      .left {
        .num {
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #e86a42;
        }
        .name {
          margin-top: 5px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #282828;
        }
      }
      .right {
        width: 53px;
        height: 36px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right1 {
        width: 47px;
        height: 47px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .item_1 {
      background: #ffffff;
      border: 2px solid #4079ff;
      border-radius: 24px;
    }
  }
}
</style>